<template>
    <div class="goods">
        <el-radio-group
            v-model="isCollapse"
            style="height: 35px; width: 100%; margin-bottom: 20px; background: #76818b; padding: 5px 10px 0"
        >
            <el-radio-button :label="false">商品详情</el-radio-button>
            <el-radio-button :label="true">园区门票</el-radio-button>
        </el-radio-group>
        <div class="goods-info">
            <div class="goods-list" v-show="!isCollapse">
                <el-row>
                    <el-col :span="6" v-for="(item, index) in goodsList" :key="index" :offset="1">
                        <el-card :body-style="{ padding: '0px' }" :key="item">
                            <img :src="item.goods_image" class="image" />
                            <div style="padding: 14px">
                                <span>{{ item.goods_name }}</span>
                                <div class="bottom clearfix">
                                    <span class="time">园区采摘：¥{{ item.goods_parkPrice }}</span>
                                    <span class="time" style="margin-left: 5px">线上：¥{{ item.goods_onLinePrice }}</span>
                                </div>
                                <div>
                                    <el-row>
                                        <el-col :span="6">
                                            <span>数量：</span>
                                        </el-col>
                                        <el-col :span="4">
                                            <input
                                                type="number"
                                                maxlength="5"
                                                min="0"
                                                v-model="item.goods_number"
                                                :placeholder="item.goods_number"
                                            />
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="operate">
                                    <el-button type="primary" size="mini" @click="checkInfoVisible(item)">立即购买</el-button>
                                    <el-popconfirm title="确定要加入购物车吗？" @onConfirm="addCar(item)">
                                        <el-button type="danger" plain size="mini" slot="reference">加入购物车</el-button>
                                    </el-popconfirm>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="ticket" v-show="isCollapse">
                <div class="scenery_api_item">
                    <div class="scenery_api_top">
                        <span class="W01">产品</span> <span class="W02_5">&nbsp;</span> <span class="W03">退改条件</span>
                        <span class="W07">园区价</span> <span class="W04">平台价</span> <span class="W05">优惠</span>
                        <span class="W06">支付方式</span>
                    </div>
                    <div class="scenery_api_main" v-for="(item,index) in tickets" :key="index">
                        <div class="api_item">
                            <div class="api_channel">
                                <div class="api_item_name"><b>{{item.type}}</b></div>
                                <div class="api_item_content">
                                    <div class="api_line">
                                        <dl class="api_line_dl">
                                            <dt class="W01">
                                                <div class="p-type">
                                                    <a href="javascript:;" class="name"
                                                        ><strong>套票&nbsp;</strong>--<b>{{item.title}}</b>
                                                        <br>
                                                        <i :class="item.isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="item.isShow = !item.isShow"></i>
                                                        </a>
                                                </div>
                                            </dt>
                                            <dd class="W02_5"><span>&nbsp;</span></dd>
                                            <dd class="W03">
                                                <span
                                                    class="tag tag_green"
                                                    des="本产品预订后支持随时退，经核实未使用，可取消，详情参见退款规则。"
                                                    >随时退</span
                                                >
                                            </dd>
                                            <dd class="W07"><s class="f_oldprice_s">￥{{item.parkPrice}}</s></dd>
                                            <dd class="W04">
                                                <span class="b-orange"><b>¥</b>{{item.onLinePrice}}</span>
                                            </dd>
                                            <dd class="W05">&nbsp;</dd>
                                            <dd class="W06">
                                                <el-button
                                                    class=""
                                                    type='warning'
                                                    ><i class="el-icon-shopping-cart-2"></i></el-button
                                                >
                                                <span style="margin-left:5px"> </span>
                                                <el-button
                                                    class=""
                                                    type='danger'
                                                    
                                                    >抢购</el-button
                                                >
                                                <!-- <div class="mini_code">
                                                    <a href="javascript:;" class="code_btn"><span class="s_code"></span></a>
                                                    <span class="b_code" tickettypeid="615135" sid="672387">
                                                        <img src="//img1.40017.cn/cn/comm/images/cn/public/transparent_loading_v2.gif" />
                                                        <span>微信扫一扫 使用小程序</span>
                                                    </span>
                                                </div> -->
                                            </dd>
                                        </dl>
                                        <div class="remark-box" v-show="item.isShow">
                                            <span class="remark-arrow"></span>
                                            <div class="remark-info">
                                                <div class="remark">
                                                    <ul>
                                                        <li>
                                                            <span class="r-name">入园方式：</span>
                                                            <div class="r-content">
                                                                <p>无需换票，持[入园辅助码]直接入园，入园地址：采摘园东门；</p>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <span class="r-name">预订时间：</span>
                                                            <div class="r-content">
                                                                <p>如需预订，您最晚要在游玩当天15:30前下单，请尽早预订。</p>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <span class="r-name">包含项目：</span>
                                                            <div class="r-content">
                                                                <p>亲子1大1小票1张<br />亲子枇杷畅吃券(入园批杷畅吃)</p>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <span class="r-name">预订说明：</span>
                                                            <div class="r-content">
                                                                <p>
                                                                    ①门票当天有效，出园后再次入园，需再次购票。<br />②为保证取票、入园顺利，预订时请务必填写真实姓名、手机号码、身份证等信息。<br />③1小为1.4（含）米以下儿童，1.2（含）米以下儿童免费入园，一名大人只限带1名免费儿童入园。
                                                                </p>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <span class="r-name">发票说明：</span>
                                                            <div class="r-content"><p>您需在游玩次日，可至订单详情页申请发票。</p></div>
                                                        </li>
                                                        <li>
                                                            <span class="r-name">退改规则：</span>
                                                            <div class="r-content">
                                                                <p>
                                                                    如需退款，可登录同程旅游app至订单详情页申请。<br />(1)随时可申请退款，不支持部分退款。退款无需支付手续费。<br />(2)本产品一经预订，不支持改期。
                                                                </p>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <span class="r-name">商家信息：</span>
                                                            <div class="r-content">
                                                                <p>
                                                                    本景区服务实际由苏州马峰窝文化传媒有限公司提供（苏州马峰窝文化传媒有限公司统一社会信用代码：91320583MA1WLD6Y4Q）
                                                                </p>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getGoods, submitGoodsDel } from '../../../api/index';
export default {
    data() {
        return {
            isCollapse: true,
            goodsList: [],
            tickets:[
                {
                    type:'亲子家庭票',
                    title:'【亲子1大1小】枇杷采摘券(入园畅吃）',
                    change:'随时退',
                    parkPrice:38,
                    onLinePrice:38,
                    isShow:false
                },
            ]
        };
    },
    methods: {
        getData() {
            getGoods().then((res) => {
                console.log(res, 'goods');
                const newList = res.map((item, index) => {
                    item.goods_number = 1;
                    return item;
                });
                this.goodsList = newList;
            });
        },
        addCar(item) {
            console.log(item);
            this.$store.commit('addCarList', item);
            console.log(this.$store.state.carList);
        }
    },
    created() {
        this.getData();
    }
};
</script>
<style scoped>
.goods {
    width: 1200px;
    margin: 20px auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.el-radio-button--small .el-radio-button__inner {
    font-size: 16px !important;
}
.time {
    font-size: 13px;
    color: #999;
}
.operate {
    margin: 10px 0 5px 0;
    overflow: hidden;
}
.operate button {
    margin-left: 5px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
    height: 200px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
.scenery_api_item {
    width: auto;
}
.scenery_api_item .scenery_api_top {
    height: 31px;
    background-color: #fff;
    line-height: 31px;
    overflow: hidden;
    font-size: 14px;
    padding: 10px 0 8px 0;
    font-family: 'Microsoft YaHei';
    -webkit-box-shadow: 1px 2px 2px #ddd;
    box-shadow: 1px 2px 2px #ddd;
    margin-bottom: 2px;
}
.scenery_api_item .scenery_api_top .W01 {
    width: 495px;
    text-indent: 152px;
}
.scenery_api_top span {
    float: left;
    color: #999;
}
.scenery_api_item .W02_5 {
    width: 145px;
    padding-right: 5px;
}
.scenery_api_item .scenery_api_top .W02_5 {
    width: 144px;
    height: 31px;
}
.scenery_api_item .scenery_api_top .W03 {
    width: 80px;
    height: 31px;
}
.scenery_api_item .scenery_api_top .W07 {
    width: 70px;
    height: 31px;
}
.scenery_api_item .scenery_api_top .W04 {
    width: 103px;
    height: 31px;
}
.scenery_api_item .scenery_api_top .W05 {
    width: 151px;
    height: 31px;
}
.scenery_api_item .scenery_api_top .W06 {
    width: 90px;
    height: 31px;
}
.api_item {
    border-left: none;
    border-right: none;
    border-top: 1px #ddd solid;
    background-color: #e6e6e6;
    margin-bottom: -1px;
    zoom: 1;
    border-bottom: 1px #ddd solid;
    position: relative;
}
.api_item .api_item_name {
    font-size: 14px;
    float: left;
    width: 140px;
    text-align: center;
    line-height: 23px;
    padding: 10px 0 0 0;
    overflow: hidden;
    font-family: 'Microsoft YaHei';
}
.api_item .api_item_name b {
    color: #666;
}
.api_item .api_item_name b {
    color: #666;
}
.api_item .api_item_content {
    border-left: 1px #ddd solid;
    background: #fff;
    font-size: 14px;
    float: left;
    width: 1057px;
    box-sizing: border-box;
}
.api_line {
    padding: 10px 0 0 0;
    border-bottom: 1px #eee dashed;
    overflow: hidden;
    margin-bottom: -1px;
    -webkit-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease;
}
.api_item_content dl {
    zoom: 1;
        border-bottom: 1px #eee solid;
    padding: 0 10px 10px 10px;
}
.scenery_api_item .W01 {
    width: 334px;
}

.api_item_content dl dt {
    float: left;
}
.api_item_content dl dd {
    float: left;
    min-height: 1px;
}
.p-type {
    padding: 0 20px 0 0;
    line-height: 23px;
    *line-height: 20px;
}
.p-type .name, .p-type .phone-tit {
    display: inline;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    text-decoration: none;
    padding-right: 5px;
    color: #666;
}
.p-type .name strong, .p-type .phone-tit strong {
    font-weight: bold;
    color: #999;
}
.p-type .name b, .p-type .phone-tit b {
    font-weight: normal;
    padding-right: 5px;
}
.scenery_api_item .W02_5 {
    width: 145px;
    padding-right: 5px;
}
.scenery_api_item .W03 {
    width: 80px;
}
.tag_green {
    background: none;
    border: 1px #50b400 solid;
    color: #50b400;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
}
.scenery_api_item .W07 {
    width: 70px;
}
.f_oldprice_s {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}
.scenery_api_main{
    overflow: hidden;
}
.scenery_api_item .W04 {
    width: 100px;
}
.scenery_api_main .b-orange {
    color: #f60;
    font-size: 22px;
}
.scenery_api_main .b-orange b {
    font-size: 14px;
}
.scenery_api_item .W05 {
    width: 155px;
}
.scenery_api_item .W06 {
    width: 120px;
    padding-left: 20px;
    position: relative;
}
.f_bookbtn_w {
    display: block;
    text-align: center;
    width: 80px;
    background: #ff7800;
    color: #fff;
    height: 26px;
    margin: 0 0 12px;
    line-height: 26px;
    cursor: pointer;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.api_item_content .ptCurrent .remark-box {
    display: block;
}
.remark-box .remark-info {
    padding: 15px 20px;
    overflow: hidden;
    background: #fff4d9;
    border-top: 1px #ffd5a1 solid;
    float: left;
}
.remark {
    width: 100%;
    overflow: hidden;
}
.remark ul {
    overflow: hidden;
    line-height: 28px;
}
.remark ul li {
    overflow: hidden;
    font-family: 'Microsoft YaHei';
}
.remark .r-name {
    float: left;
    font-size: 14px;
    font-weight: bold;
    width: 75px;
}
.remark .r-content {
    float: left;
    width: 930px;
    
}
.remark p {
    line-height: 28px;
    font-family: "Microsoft YaHei";
    color: #666;
}
.api_channel{
    overflow: hidden;
}
</style>